<template>
	<view class="page">
		<view class="radio-item">
			<view class="left-box">
				<image class="radio" src="/static/image/radio_icon.png" mode="aspectFit"
					@click="selectedChange(index,true)" v-if="item.radioType== false"></image>
				<image class="radio" src="/static/image/radio_selected_icon.png" mode="aspectFit"
					@click="selectedChange(index,false)" v-if="item.radioType == true"></image>
			</view>
			<view class="right-box">
				<view class="card-item">
					<view class="card-title">
						批次号：PC12456789715621321321
					</view>
					<view class="card-content">
						<view class="item">
							<view class="title">
								物料：
							</view>
							<view class="value">
								{{item.shortName}}
							</view>
						</view>
						<view class="item">
							<view class="title">
								物料编号：
							</view>
							<view class="value">
								WL-12456421331231312
							</view>
						</view>
						<view class="item">
							<view class="title">
								仓库：
							</view>
							<view class="value blue">
								收货区
							</view>
						</view>
						<view class="item">
							<view class="title">
								库位：
							</view>
							<view class="value blue">
								SHQ-007
							</view>
						</view>
						<view class="item">
							<view class="title">
								数量：
							</view>
							<view class="value blue">
								100箱
							</view>
						</view>
						<view class="input-box">
							<view class="title">
								备注1
							</view>
							<view class="input" v-if="item.inputType == false"
								@click="inputTypeChange(index,'inputType',true)">
								{{item.inputRemark == '' ? '请输入备注信息(非必填)' : item.inputRemark}}
							</view>
							<input class="input" v-if="item.inputType == true" focus placeholder="请输入备注信息(非必填)"
								type="text" :value="item.inputRemark" @input="inputChange($event,index,'inputRemark')"
								@blur="inputTypeChange(index,'inputType',false)" />
						</view>
						<view class="input-box">
							<view class="title">
								备注2
							</view>
							<view class="input" v-if="item.inputTwoType == false"
								@click="inputTypeChange(index,'inputTwoType',true)">
								{{item.inputTwoRemark == '' ? '请输入备注信息(非必填)' : item.inputTwoRemark}}
							</view>
							<input class="input" placeholder="请输入备注信息(非必填)" v-if="item.inputTwoType == true"
								@input="inputChange($event,index,'inputTwoRemark')" type="text" focus
								@blur="inputTypeChange(index,'inputTwoType',false)" :value="item.inputTwoRemark" />
						</view>
						<view class="button">
							绑定容器
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clearbottom">

		</view>
		<view class="button-box">
			<view class="radio" @click="AllselectedChange">
				<image class="icon" src="/static/image/radio_icon.png" mode="aspectFit"
					v-if="radioSelectedType == false"></image>
				<image class="icon" src="/static/image/radio_selected_icon.png" mode="aspectFit"
					v-if="radioSelectedType == true"></image>
				<view class="radio-name">
					全选
				</view>
			</view>
			<view class="button">
				保存备注
			</view>
			<view class="printer-view">
				<printer :printInfo="printInfo" printStatus="批次" button-name="批量打印批次二维码" background-color="#4169e1">
				</printer>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import printer from '@/components/printer/index.vue';
	export default {
		components: {
			printer,
		},
		data() {
			return {
				printInfo: [],
				radioSelectedType: false, // 全选按钮状态
				info: {
					"id": "1518123963304615936",
					"invoicesNo": "IN-202204241554649046",
					"linkId": null,
					"linkNo": null,
					"isPickingList": null,
					"employeeId": null,
					"employeeName": null,
					"mobile": null,
					"type": null,
					"isOut": null,
					"status": null,
					"invoicesJson": null,
					"kind": null,
					"alreadyKind": null,
					"notKind": null,
					"createUser": null,
					"createTime": null,
					"updateTime": null,
					"materialList": null,
					"batchList": [{
						"id": "1518123963325587456",
						"batchNo": "PC-202204241523762164",
						"materialId": "1506096646394916864",
						"materialNo": "WL-202203221078815160",
						"materialName": "口红C原材料",
						"shortName": "口红C原材",
						"number": "0.501",
						"twoNumber": null,
						"unit": "克",
						"twoUnit": null,
						"storehouseId": "1390584953946771457",
						"storehouseNo": "SHQ-001",
						"warehouseName": "收货区",
						"param": "{\"大小\": \"1\", \"重量\": \"66\"}"
					}, {
						"id": "1518123963325587457",
						"batchNo": "PC-202204241527001663",
						"materialId": "1506096646394916864",
						"materialNo": "WL-202203221078815160",
						"materialName": "口红C原材料",
						"shortName": "口红C原材",
						"number": "2.499",
						"twoNumber": null,
						"unit": "克",
						"twoUnit": null,
						"storehouseId": "1390584953946771457",
						"storehouseNo": "SHQ-001",
						"warehouseName": "收货区",
						"param": "{\"大小\": \"1\", \"重量\": \"66\"}"
					}],
					"warehouseId": null,
					"warehouseName": null,
					"locationId": null,
					"locationNo": null,
					"projectName": null,
					"projectNo": null,
					"projectLeader": null,
					"projectLeaderId": null,
					"wareHouseStrategy": null,
					"toProcess": null,
					"toEquipment": null,
					"pickingListNo": null,
					"expectTime": null
				},
			}
		},
		onLoad() {
			let info = getApp().globalData.info;
			console.log('infos', info);
			if (info.id) {
				this.info = getApp().globalData.info;
			}
			this.init();
			this.parseInfo();
		},

		methods: {
			init: function() {

			},
			/**
			 * 初始化info数据列表
			 */
			parseInfo: function() {
				let info = this.info;
				for (let i = 0; i < info.batchList.length; i++) {
					this.$set(info.batchList[i], 'radioType', false);
					this.$set(info.batchList[i], 'inputRemark', '');
					this.$set(info.batchList[i], 'inputType', false);
					this.$set(info.batchList[i], 'inputTwoRemark', '');
					this.$set(info.batchList[i], 'inputTwoType', false);
				}
				this.info = info;
				getApp().globalData.info = null;
				console.log(info.batchList);
			},
			/**
			 * input显示切换状态触发事件
			 */
			inputTypeChange: function(index, key, type) {
				this.$set(this.info.batchList[index], key, type);
			},
			waittooltip: function() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none',
					duration: 2000
				});
			},
			/**
			 * input框内容改变触发事件
			 */
			inputChange: function(e, index, key) {
				this.$set(this.info.batchList[index], key, e.detail.value);
			},
			/**
			 * 选择框改变触发事件
			 */
			selectedChange: function(index, type) {
				let info = this.info;
				let printInfo = this.printInfo;
				this.$set(info.batchList[index], 'radioType', type);
				if (type == false) {
					printInfo.splice(index, 1);
					this.radioSelectedType = false;
				} else {
					printInfo = [];
					let num = 0;
					for (let i = 0; i < info.batchList.length; i++) {
						if (info.batchList[i].radioType == true) {
							num += 1;
							printInfo.push(info.batchList[i]);
						}
					}
					this.printInfo = printInfo;
					if (num == info.batchList.length) {
						this.radioSelectedType = true;
					}
				}
			},
			/**
			 * 全选按钮点击触发事件
			 */
			AllselectedChange: function() {
				let printInfo = [];
				let radioSelectedType = this.radioSelectedType;
				let info = this.info;
				let type = false;
				if (radioSelectedType == false) {
					type = true;
				} else {
					type = false;
				}
				for (let i = 0; i < info.batchList.length; i++) {
					this.$set(info.batchList[i], 'radioType', type);
					if (type == true) {
						printInfo.push(info.batchList[i])
					}
				}
				this.printInfo = printInfo;
				this.info = info;
				this.radioSelectedType = !radioSelectedType;
			},
			/**
			 * 保存备注触发事件
			 */
			saveRemark: function() {
				let data = [];
				let info = this.info;
				info.batchList.forEach(res => {
					if (res.radioType == true) {
						data.push({
							id: res.id,
							remarkOne: res.inputRemark,
							remarkTwo: res.inputTwoRemark
						});
					}
				})
				if (data.length > 0) {
					// [{"id":"1516959332749795329","remarkOne":"111","remarkTwo":"222"},{"id":"1516959332749795328","remarkOne":"11","remarkTwo":"22"}]
					api.updateBatchRemark(data).then(res => {
						uni.showToast({
							title: '修改备注成功',
							mask: true,
							duration: 2000
						});

					})
				} else {
					uni.showToast({
						title: '请选择批次',
						icon: 'none',
						mask: true,
						duration: 2000
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.radio-item {
		display: flex;
		margin-bottom: 20rpx;

		.left-box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
		}

		.radio {
			width: 40rpx;
			height: 40rpx;
		}

		.right-box {
			width: calc(100% - 120rpx);

			.card-item {
				box-shadow: 0px 0px 10px #8A8A8A;
				border-radius: 10rpx;
				overflow: hidden;
				background-color: white;

				.card-title {
					padding: 0 20rpx;
					background-color: #1793c6;
					color: white;
					font-size: 28rpx;
					line-height: 60rpx;
				}

				.card-content {
					padding: 20rpx;

					.item {
						display: flex;
						line-height: 60rpx;
						font-size: 30rpx;
					}

					.blue {
						color: #1793c6;
					}

					.input-box {
						display: flex;
						font-size: 30rpx;
						margin: 20rpx 0;

						.title {
							line-height: 60rpx;
						}

						.input {
							flex: 1;
							padding: 0 20rpx;
							background-color: #afafaf;
							margin-left: 20rpx;
							height: 60rpx;
							border-radius: 10rpx;
						}
					}

					.button {
						background-color: #4169e1;
						color: white;
						float: right;
						padding: 0 10rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						border-radius: 10rpx;
						margin: 20rpx 0;
						margin-top: 0;
					}

				}
			}
		}

	}

	.clearbottom {
		width: 100%;
		height: calc(constant(safe-area-inset-bottom) + 120rpx);
		height: calc(env(safe-area-inset-bottom) + 120rpx);
	}

	.button-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		display: flex;
		justify-content: space-between;
		background-color: white;

		.radio {
			display: flex;
			margin: 20rpx 0;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.button {
			padding: 0 10rpx;
			color: white;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #4169e1;
			line-height: 80rpx;
			height: 80rpx;
		}

		.printer-view {
			float: right;
			height: 80rpx;
			margin: 20rpx 0;
			margin-top: 0;
		}
	}
</style>
